<template>
  <div class="flexContent">
    <!-- 门店预付款详情 -->
    <!-- <div class="main"> -->
    <div class="searchBox" style="height: 146px;">
      <el-form :model="infoData" style="margin-bottom: 20px;" ref="storeAdvancedetailRef" label-position="left"
        label-width="auto" class="demo-ruleForm">
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="门店名称:">
              <span>{{ infoData.storeName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="门店地址:">
              <span>{{ infoData.address }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="当前余额:">
              <span>{{ infoData.balance }}元</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form class="demo-form-inline" label-position="left" label-width="auto">
        <el-row :gutter="12" style="display: flex;flex-wrap: wrap;">
          <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item label="类型：">
              <el-select style="width: 95%" v-model="type" clearable placeholder="请选择类型">
                <el-option label="加款" value="0"></el-option>
                <el-option label="点采" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item label="更新时间：">
              <el-date-picker v-model="date" clearable type="daterange" unlink-panels range-separator="-"
                start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" style="width: 95%" />
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item>
              <el-button @click.stop="searchFn" class="submitBtn" icon="el-icon-search">搜索</el-button>
              <el-button @click.stop="emptyFn" class="resetBtn" icon="el-icon-refresh-right">重置</el-button>
              <el-button @click="returnFn" class="resetBtn" icon="el-icon-back">返回</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="table" style="display: flex;flex:1;flex-direction: column;justify-content: space-between;" id="tableBox"
      v-height>
      <div style="flex:1;">
        <el-table border class="tablebox" :data="infoData.storeAdvanceList" size="medium" style="width: 100%"
          height="100%">
          <el-table-column type="index" align="center" width="150" label="序号" />
          <el-table-column prop="payMethod" align="center" label="支付方式">
            <template v-slot="{ row }">
              <span v-if="row.payMethod === '0'">在线支付</span>
              <span v-if="row.payMethod === '1'">银行支付</span>
              <span v-if="row.payMethod === '2'">现金支付</span>
              <span v-if="row.payMethod === '3'">预付款</span>
            </template>
          </el-table-column>
          <el-table-column prop="type" align="center" label="类型">
            <template v-slot="{ row }">
              <span>{{ row.type == "0" ? "加款" : "点采" }}</span>
              <!-- <span v-if="row.payMethod === '2'">加款</span> -->
            </template>
          </el-table-column>
          <el-table-column prop="money" align="center" label="加款金额" />
          <el-table-column prop="balance" align="center" label="剩余金额" />
          <el-table-column prop="payTime" align="center" label="更新时间">
            <template v-slot="{ row }">
              <span>{{ row.payTime | parseTime("YYYY-MM-DD HH:mm:ss") }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="remake" align="center" label="备注">
            <template v-slot="{ row }">
              <span>{{ row.remake ? row.remake : "-" }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="paginationBox" style="height: 50px;padding-top: 20px;">
        <el-pagination :current-page="page.pageNum" background :page-sizes="$pageSizes" :page-size="page.pageSize"
          layout="total,->, sizes, prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
    <!-- </div> -->
  </div>
</template>

<script>
import {
  getStoreAdvanceListDetail,
  genericGoodsDelete,
} from "@/api/genericGoods";
export default {
  name: "StoreAdvanceDetail",
  data() {
    return {
      isSearch: false,
      infoData: {
        advanceId: "",
        storeName: "",
        address: "",
        balance: "",
        storeAdvanceList: [],
      },
      type: "",
      minDate: "",
      maxDate: "",
      date: [],
      page: {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      },
    };
  },
  created() {
    this.infoData.advanceId = this.$route.query?.id;
    this.getStoreAdvanceListDetail();
  },
  methods: {
    async getStoreAdvanceListDetail() {
      if (!this.isSearch) {
        this.maxDate = "";
        this.minDate = "";
        this.type = "";
      }
      console.log(this.infoData.advanceId, "id");
      const res = await getStoreAdvanceListDetail({
        ...this.page,
        type: this.type,
        id: this.infoData.advanceId,
        maxDate: this.maxDate,
        minDate: this.minDate,
      });
      if (res.code === 200) {
        console.log(res.data, "success");
        this.infoData.storeName = res.data.storeName;
        this.infoData.address = res.data.address;
        this.infoData.balance = res.data.balance;
        this.infoData.storeAdvanceList = res.data.pageInfo.list;
        this.page.pageSize = res.data.pageInfo.pageSize;
        this.page.pageNum = res.data.pageInfo.pageNum;
        this.page.total = res.data.pageInfo.total;
      }
    },
    async searchFn() {
      this.page = {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      };
      this.isSearch = true;
      this.maxDate = this.date?.length ? this.date[1] : "";
      this.minDate = this.date?.length ? this.date[0] : "";
      this.getStoreAdvanceListDetail();
    },
    emptyFn() {
      this.page = {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      };
      this.isSearch = false;
      this.maxDate = "";
      this.minDate = "";
      this.type = "";
      this.date = [];
      this.getStoreAdvanceListDetail();
    },
    // 获取条数改变
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.page.pageNum = 1;
      console.log(`每页 ${val} 条`);
      this.getStoreAdvanceListDetail();
    },
    // 获取页数改变
    handleCurrentChange(val) {
      this.page.pageNum = val;
      this.getStoreAdvanceListDetail();
    },
    returnFn() {
      this.closeTag("storeAdvance");
    },
  },
};
</script>

<style scoped lang="scss">
.storeAdvanceDetail_content {
  // padding: 10px;

  .main {
    padding: 32px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;

    .btn {
      /* margin: 0 auto; */
      padding-top: 50px;
      text-align: center;
    }
  }

  .table {
    flex: 1;
    display: flex;
    // flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
  }
}
</style>
